<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素对象的常用方法</title>
</head>
<body>
    <div class="onediv" id="onediv">
        <p id="one">第一个p</p>
        <p id="two">第二个p</p>
        <p id="three">第三个p</p>
    </div>
    <hr/>
    <div class="twodiv" id="twodiv">
        <p id="four">第四个p</p>
        <p id="five">第五个p</p>
        <p id="six">第六个p</p>
        <p id="seven">第七个p</p>
        <p id="eight">第八个p</p>
    </div>
    <hr/>
    <br/>
    <br/>
    <div id="testevent"  class="divthree">
        <button>测试事件的按钮</button>
    </div>
    <div id="threediv">
        <p  id="threedivonep"  class="threedivp">33</p>
        <p class="threedivp">44</p>
        <p class="threedivp">55</p>
    </div>
    
</body>
<script type="text/javascript">
    var div=document.getElementById("onediv");
    var newp=document.createElement("p");
    var newptext=document.createTextNode("添加第四个p");
    newp.appendChild(newptext);
    div.appendChild(newp);
    var fivep=document.createElement("p");
    var  fiveptext=document.createTextNode("添加第五个p");
    fivep.appendChild(fiveptext);
    var onep=document.getElementById("one");
    div.insertBefore(fivep,onep);
    var twop=div.querySelector("#two");//queryselector是从文档顶层开始查询的
    //所以性能比较低
    console.log("twop="+twop);
    onep.parentNode.replaceChild(onep,twop);
    //用已经用的节点去替换另一个存在的节点，再把用于替换的节点删除
    var replacethreenodep=document.createElement("p");
    var replacethreenodeptext=document.createTextNode("替换已经存在的第二个p");
    replacethreenodep.appendChild(replacethreenodeptext);
    var threep=div.querySelector("#three");
    div.replaceChild(replacethreenodep,threep);
    div.setAttribute("name","hao"); //设置属性
    var onedivclass=div.getAttribute("class");
    console.log("onedivclass="+onedivclass);//获取属性
    var divboundrect=div.getBoundingClientRect; //获取div的盒子模型属性
    console.log("divboundrect="+divboundrect);
    var divrect=div.getClientRects();
    console.log("divrect="+divrect);

    //同级插入，替换几点
    var fourp=document.getElementById("four");
    var insertfourpbefore=document.createElement("p");
    var insertfourpbeforetext=document.createTextNode("第二个div的第一个p之前");
    insertfourpbefore.appendChild(insertfourpbeforetext);
    fourp.before(insertfourpbefore);
    var afterfourp=document.createElement("p");
    var afterfourptext=document.createTextNode("插入在第四个p后面");
    afterfourp.appendChild(afterfourptext);
    fourp.after(afterfourp);
    var replacesixp=document.createElement("p");
    var replacesixptext=document.createTextNode("替换第六个p");
    replacesixp.appendChild(replacesixptext);
    var sixp=document.getElementById("six");
    sixp.replaceWith(replacesixp);
    var sevenp=document.getElementById("seven");
    var eightp=document.getElementById("eight");
    sevenp.replaceWith(eightp); // 用已经有的同级节点去替换一个存在的节点

    var testeventdiv=document.getElementById("testevent");
    testeventdiv.onclick=function(){
        alert("你点击了我一次");
    }// 这里是更具属性添加事件
    function clickevent(){
        alert("addeventlistener添加的");
    }
    function clickeventtwo(){
        alert("addeventlistener添加的2");
    }
    testeventdiv.addEventListener("click",clickevent);
    testeventdiv.addEventListener("click",clickeventtwo);
    testeventdiv.removeEventListener("click",clickevent);
    testeventdiv.removeAttribute("class");//移除属性

    //元素查询子元素的方法
    var threediv=document.getElementById("threediv");
    var querythreedivfirstp=threediv.querySelector("p");
    //var querythreedivfirstpmethodtwo=threediv.getElementById("threedivonep");
    //没有该方法
    var querythreedivallpmethodone=threediv.getElementsByTagName("p");
    var querythreedivallpmethodtwo=threediv.querySelectorAll("p");
    var querythreedivallpmethodthree=threediv.getElementsByClassName("threedivp");

    //查询最靠近的祖先元素
    var threedivonep=document.getElementById("threedivonep");
    var closetparent=threedivonep.closest("div");
    console.log("closetparent="+closetparent);
    if(closetparent.matches("div")){
        console.log("匹配到了")
    }
</script>
</html>